<template>
  <div class="designOpinion">
    <div class="contentbox">
      <div class="printImg" v-loading="iframeLoading" v-if="file" id="printImg">
        <iframe :src="pdfPath" frameborder="0" class="iframe" id="iframe"></iframe>
      </div>
      <div class="addadvice">
        <div class="header">
          <div class="title">{{attachName}}</div>
          <div class="export" v-if="!isCurrentProcess && showFS">
            <el-button class="add" type="primary" size="mini" @click="addadvice">新增</el-button>
          </div>
        </div>
        <div v-if="!showadd" class="opinionList">
          <div class="touchBtn">
            <span :class="{'active' : showFS}" @click="handleChangeView(0)">复审意见</span>
            <span :class="{'active' : !showFS}" @click="handleChangeView(1)">初审意见</span>
          </div>
          <div id="advicelist" style="height:100%">
            <template v-if="showFS">
              <div class="menulist" v-if="!isCurrentProcess">
                <el-switch style="margin-top: 10px;" v-model="moreChange" inactive-text="批量修改"></el-switch>
                <el-switch style="margin-top: 10px;" v-model="isDisplayAll" inactive-text="全部"></el-switch>
                <div style="margin: 20px 30px;" v-show="moreChange">
                  <el-radio-group style="margin-right: 20px;" v-model="changeType.status">
                    <el-radio :label="3">已修改</el-radio>
                    <el-radio :label="2">未修改</el-radio>
                  </el-radio-group>
                  <el-button type="primary" size="small" @click="changeAdvice">确定</el-button>
                  <el-button size="small" @click="moreChange = false">取消</el-button>
                </div>
                <div style="clear:both;"></div>
              </div>
              <div class="advicelist">
                <div class="item" v-for="(item, index) in adviceList" :key="index">
                  <div class="situation">
                    <div class="msg" style="margin-top:0;">附件名称：{{item.drawingType | handleSuffix}}</div>
                    <div class="msg">问题描述：{{item.content}}</div>
                    <div class="msg">问题类型：{{contentTypeList[item.contentType-1]}}</div>
                    <div class="msg">修改情况：{{item.status | statusType}}</div>
                    <div class="msg">审查时间：{{item.updateTime || item.createTime}}</div>
                  </div>
                  <div class="other" v-if="!isCurrentProcess">
                    <!-- <div class="date">2018/10/03</div> -->
                    <div style="display: flex; align-items: center;">
                      <el-button
                        type="text"
                        @click="changeOne(item.id)"
                        v-if="item.contentType != 4"
                      >修改情况</el-button>
                      <div class="delete" @click="deleteOne(item.id)">删除</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-if="!showFS">
              <div class="advicelist">
                <div class="item" v-for="(item, index) in csAdviceList" :key="index">
                  <div class="situation">
                    <div class="msg" style="margin-top:0;">附件名称：{{item.drawingType | handleSuffix}}</div>
                    <div class="msg">问题描述：{{item.content}}</div>
                    <div class="msg">问题类型：{{contentTypeList[item.contentType-1]}}</div>
                    <div class="msg">修改情况：{{item.status | statusType}}</div>
                    <div class="msg">审查时间：{{item.updateTime || item.createTime}}</div>
                  </div>
                  <div class="other">
                    <!-- <div class="date">2018/10/03</div> -->
                    <div style="display: flex; align-items: center;"></div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- 添加审查意见 -->
        <el-form v-if="showadd" :model="form" label-width="80px" style="margin-top:30px;">
          <!-- <el-form-item label="附件名称" prop="drawingFileId">
            <el-select placeholder="请选择" v-model="form.dir">
              <el-option
                :label="subName"
                :value="subNameIndex"
              ></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="所属文件">
            <el-input v-model="subName" readonly style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="附件名称">
            <el-input v-model="file.fileName" readonly style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="意见类型" prop="contentType">
            <el-select placeholder="请选择" v-model="form.contentType">
              <el-option
                :key="item"
                v-for="(item, index) in contentTypeList"
                :label="item"
                :value="index+1"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述" v-if="form.contentType != 4">
            <el-input type="textarea" v-model="form.content" rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="showadd=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 修改情况弹窗 -->
    <el-dialog :close-on-click-modal="false" title="修改情况" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <el-radio-group style="margin-right: 20px;" v-model="changeTypeOne.status">
          <el-radio :label="3">已修改</el-radio>
          <el-radio :label="2">未修改</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeAdviceOne">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import config from "@/config/index.js";
import {
  getExport,
  changeAdviceOne,
  deleteAdviceOne,
  addAdvice,
  changeAdvice,
  getAdviceList
} from "@/api/plannDesignBudget/designOpinions";
import { getFile } from "@/api/common.js";
export default {
  components: { pdf },
  data() {
    return {
      iframeLoading: false,
      pdfLoading: false,
      pdfPath: "",
      contentTypeList: ["一般错误", "严重错误", "疑问片块", "无错误"],
      form: {
        content: "",
        linkName: this.linkName ? this.linkName : "",
        drawingFileId: "",
        drawingType: "",
        contentType: 1,
        status: 1,
        dir: ""
      },
      showFS: true,
      showadd: false,
      moreChange: false,
      currentPage: 1,
      pageCount: 1,
      pdfNum: 0,
      pdfList: [],
      dialogVisible: false,
      changeTypeOne: {
        status: 3,
        id: ""
      },
      changeType: {
        status: 3,
        idStr: ""
      },
      adviceList: [],
      csAdviceList: [],
      isDisplayAll: false
    };
  },
  props: {
    currentFileId: {
      type: Number,
      require: true
    },
    file: {
      type: Object,
      require: true
    },
    linkName: {
      type: String,
      require: true
    },
    projectId: {
      type: Number,
      require: true
    },
    firstLinkName: {
      type: String,
      require: true
    },
    subName: {
      type: String,
      required: false
    },
    subNameIndex: {
      type: Number,
      default: 1,
      required: false
    }
  },
  // watch: {
  //   currentFileId(val){
  //     console.log(this.currentFileId,"监听变化");
  //     // this.file = val
  //     this.getPDF();
  //   }
  // },
  created() {
    console.log(this.currentFileId, "页面刚开始的时候");
    this.getPDF();
  },
  computed: {
    attachName() {
      return this.showadd ? "审查意见录入" : "审查意见";
    },
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_CITY_CENTER_EXAMINE";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
    // fileUrl() {
    //   let url = this.$httpsCad + "/?url=" + this.file.url;
    //   return url;
    // }
  },
  methods: {
    getFile(id) {
      //获取文件
      this.pdfLoading = true;
      getFile({
        fileId: id
      })
        .then(res => {
          this.pdfLoading = false;
          this.pdfPath = `${this.$httpsCad}/?url=${this.$https}${res.data.filePath}`;
        })
        .catch(res => {
          this.pdfLoading = false;
        });
    },
    getPDF() {
      console.log("变换");
      //获取pdf
      this.getFile(this.file.fileId);
      this.getAdviceList();
    },
    onSubmit() {
      //提交新增审查意见
      if (this.form.contentType == 4) {
        this.form.status = 4;
        this.form.content = "无";
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      addAdvice(this.form)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.showadd = false;
          if (this.isDisplayAll) {
            this.getAllAdviceList();
          } else {
            this.getAdviceList();
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    addadvice() {
      //打开新增审查意见表单
      this.form = {
        content: "",
        projectId: this.projectId,
        linkName: this.linkName,
        drawingFileId: this.file.fileId,
        drawingType: this.file.fileType,
        contentType: 1,
        status: 1,
        dir: this.subNameIndex
      };
      this.showadd = true;
    },
    changeAdvice() {
      //批量修改情况
      if (this.adviceList.length > 0) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        let list = [];
        this.adviceList.forEach(a => {
          list.push(a.id);
        });
        this.changeType.idStr = list.join(",");
        changeAdvice(this.changeType)
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.getAdviceList();
          })
          .catch(res => {
            loading.close();
          });
      }
    },
    handleChangeView(flag) {
      switch (flag) {
        case 0:
          this.showFS = true;
          break;
        case 1:
          this.showFS = false;
          break;
        default:
      }
    },
    _initData() {
      //获取pdf
      this.file[
        "url"
      ] = `${config.baseUrl}/pc/file/download?id=${this.file.fileId}`;
      this.getAdviceList();
    },
    changePdfPage(val) {
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    loadPdfHandler(e) {
      // pdf加载时
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    // changePdfNum(num) {
    //     //切换pdf
    //     this.pdfNum = num;
    //     this.currentPage = 1;
    //     this.pageCount = 1;
    //     this.getAdviceList();
    // },
    getExport() {
      //导出审查意见
      getExport({
        linkName: this.linkName,
        projectId: this.projectId
      }).then(res => {
        this.fileDownload(res, "审查意见.xlsx");
      });
    },
    fileDownload(data, fileName) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = fileName; // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    },
    getAdviceList() {
      //获取意见列表
      const loading = this.$loading({
        lock: true,
        target: "#advicelist",
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0)"
      });
      getAdviceList({
        drawingType: this.file.fileType,
        linkName: this.linkName,
        projectId: this.projectId
      })
        .then(res => {
          this.adviceList = res.data;
        })
        .catch(res => {});
      // 获取初审意见列表
      getAdviceList({
        drawingType: this.file.fileType,
        linkName: this.firstLinkName,
        projectId: this.projectId
      })
        .then(res => {
          this.csAdviceList = res.data;
          loading.close();
        })
        .catch(res => {
          loading.close();
        });
    },
    //获取当前文件夹下所有文件
    getAllAdviceList() {
      const loading = this.$loading({
        lock: true,
        target: "#advicelist",
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0)"
      });
      getAdviceList({
        linkName: this.linkName,
        projectId: this.projectId,
        dir: this.subNameIndex
      })
        .then(res => {
          this.adviceList = res.data;
          loading.close();
        })
        .catch(res => {
          loading.close();
        });
    },
    changeOne(id) {
      //单个修改情况
      this.changeTypeOne.id = id;
      this.dialogVisible = true;
    },
    changeAdviceOne() {
      //修改情况（单个）
      const loading = this.$loading({
        lock: true,
        target: "#advicelist",
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      changeAdviceOne(this.changeTypeOne)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.dialogVisible = false;
          if (this.isDisplayAll) {
            this.getAllAdviceList();
          } else {
            this.getAdviceList();
          }
        })
        .catch(res => {
          loading.close();
        });
    },
    deleteOne(id) {
      //删除审查意见
      this.$confirm("确认删除此条审查意见?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          deleteAdviceOne({ id: id })
            .then(res => {
              loading.close();
              this.$message({
                message: "删除成功！",
                type: "success"
              });
              if (this.isDisplayAll) {
                this.getAllAdviceList();
              } else {
                this.getAdviceList();
              }
            })
            .catch(res => {
              loading.close();
            });
        })
        .catch(err => {});
    }
  },
  filters: {
    handleSuffix(fileName) {
      if (!fileName) return "";
      return fileName.indexOf(".") !== -1 ? fileName.split(".")[0] : fileName;
    },
    statusType(data) {
      //修改情况
      switch (data) {
        case 1:
          return "未整改";
          break;
        case 2:
          return "修改不通过";
          break;
        case 3:
          return "修改通过";
          break;
        case 4:
          return "正常";
          break;
      }
    }
  },
  watch: {
    file(newVal) {
      this.getPDF();
      // 监听新文件对象不为空从新获取文件
      if (newVal) {
        this.isDisplayAll = false;
        var iframe = document.getElementById("iframe");
        this.iframeLoading = true;
        iframe.onload = function() {
          this.iframeLoading = false;
        };
      }
    },
    subNameIndex() {
      this.showadd = false;
    },
    isDisplayAll(value) {
      if (value) {
        this.getAllAdviceList();
      } else {
        this.getAdviceList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.designOpinion {
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  .contentbox {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    overflow: hidden;
    -webkit-box-align: center;
    // -webkit-align-items: center;
    // align-items: center;
    .printImg {
      width: 58%;
      height: calc(100vh - 191px);
      overflow: auto;
      .iframe {
        width: 100%;
        height: 99%;
      }
    }
    .addadvice {
      width: 40%;
      margin-left: 2%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .touchBtn {
        margin-top: 20px;
        span {
          display: inline-block;
          width: 88px;
          height: 36px;
          font-size: 14px;
          line-height: 36px;
          color: #999999;
          text-align: center;
          cursor: pointer;
          &.active {
            color: #1d88f3;
            background: #eef3f8;
          }
        }
      }
      .header {
        margin-top: 24px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 30px 30px 20px;
        border-bottom: 1px solid #e4e4e4;
        .title {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 25px;
          color: #4d4d4d;
        }
        .export {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: #737373;
          img {
            width: 12px;
            margin-right: 3px;
          }
        }
      }
      .opinionList {
        height: calc(100% - 107px);
        overflow: hidden;
      }
      .menulist {
        margin-top: 20px;
        .item {
          width: 116px;
          height: 36px;
          background: #ffffff;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          margin-right: 24px;
          float: left;
          cursor: pointer;
          &.active {
            background: #eef3f8;
            color: #1d88f3;
          }
        }
        .add {
          float: right;
          width: 60px;
          height: 28px;
          background: rgba(64, 158, 255, 1);
          border-radius: 2px;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          margin-top: 4px;
          cursor: pointer;
          margin-right: 30px;
        }
      }
      .advicelist {
        margin-top: 10px;
        height: calc(100% - 50px);
        overflow: auto;
        .item {
          padding: 20px 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          border-bottom: 1px solid #e4e4e4;
          .situation {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            .msg {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              color: #8c8c8c;
            }
          }
          .other {
            text-align: right;
            .date {
              height: 18px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 18px;
              color: #999999;
            }
            .delete {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              //   margin-top: 12px;
              color: #f92828;
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
